<template>
  <el-table :data="productList" stripe style="width: 100%" :header-cell-style="{ background: '#fafafa', color: '#909399' }">
    <el-table-column prop="product_name" label="产品信息" width="300">
      <template #default="scope">
        <div class="product_info">
          <el-image class="product_left" :src="scope.row.cover" fit="cover">
            <template #error>
              <el-icon><icon-picture /></el-icon>
            </template>
          </el-image>
          <div class="product_right">
            <div class="product_right_name">{{ scope.row.product_name }}</div>
            <div class="product_right_stock_name">规格：{{scope.row.stock_name}}</div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="product_no" label="产品编号" />
    <el-table-column prop="sale_price" label="产品售价">
      <template #default="scope">
        {{ `￥${scope.row.sale_price}` }}
      </template>
    </el-table-column>
    <el-table-column prop="stock_qty" label="库存" />
    <el-table-column prop="buy_qty" label="购买数量" />
    <el-table-column prop="discount" label="折扣力度">
      <template #default="scope">
        {{ `${scope.row.discount}%` }}
      </template>
    </el-table-column>
    <el-table-column prop="buy_price" label="实付价格">
      <template #default="scope">
        {{ `${scope.row.buy_price}元` }}
      </template>
    </el-table-column>
    <template #empty>
      <div class="empty">
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">暂无数据</div>
      </div>
    </template>
  </el-table>
</template>

<script setup lang="ts">
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  interface Props {
    productList: any
  }
  const props = withDefaults(defineProps<Props>(), {
    productList: () => []
  })
  const emit = defineEmits(['submit'])
  const onAddFollow = (row: any) => {
    emit('submit', 'ADD_FOLLOW', row)
  }
  const onDetail = (row: any) => {
    emit('submit', 'DETAIL', row)
  }
</script>

<style lang="scss" scoped>
  .empty {
    padding: 100px 0;
    .emty_img {
      transform: translateX(15%);
    }
  }
  .product_info {
    display: flex;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    .product_left {
      width: 48px;
      height: 48px;
      margin-right: 10px;
      font-size: 48px;
      display: grid;
      place-content: center;
    }
    .product_right {
      .product_right_name {
        height: 24px;
      }
      .product_right_stock_name {
        height: 24px;
        font-size: 12px;
        color: #969696;
      }
    }
  }
  .img_icon {
    width: 20px;
  }
  .el-button {
    margin-bottom: -8px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 24px;
    margin: 0 4px 8px;
    border: 1px solid #eaeaea;
    border-radius: 2px;
    text-align: center;
    background: #fff;
  }
</style>
